<template>
    
    
    <el-form ref="formRef" class="pl-3" :model="formData" label-width="110px" inline>
        
        <el-card class="!border-none flex flex-1  mt-4 " shadow="never">
            
            <el-tabs class="flex flex-1 items-center" tab-position="left">
                <el-tab-pane class="text-2xl font-medium" disabled>参考信息 : {{ formData.afterSaleOrderNo }}
                </el-tab-pane>
            </el-tabs>
        </el-card>
        
        
        <!--                基本信息-->
        <el-card class="!border-none flex flex-1  justify-center items-center" shadow="never">
            
            <div class=" text-lg	 mb-4">
                基本信息
            </div>
            
            <div class="pl-3 grid grid-cols-4 gap-0">
                <div>
                    <el-form-item label="工单类型 :" prop="afterSaleOrderType">
                        
                        <p v-for="item in afterSaleOrderConfig.afterSaleOrderType"
                           v-show="item.code ===formData.afterSaleOrderType "
                           class="text-tx-regular">
                            {{ item.name }}
                        </p>
                    
                    </el-form-item>
                </div>
                
                
                <div>
                    <el-form-item label="渠道 :" prop="channel">
                        
                        <p v-for="item in afterSaleOrderConfig.orderChannelConfig "
                           v-show="item.name ===formData.channel "
                           class="text-tx-regular">
                            
                            {{ item.value }}
                        </p>
                    
                    
                    </el-form-item>
                </div>
                
                
                <div>
                    <el-form-item label="店铺 :" prop="shopName">
                        <p v-for="item in shopNameList "
                           v-show="item.name ===formData.shopName "
                           class="text-tx-regular">
                            
                            {{ item.value }}
                        </p>
                    </el-form-item>
                </div>
            </div>
        </el-card>
        
        <el-card class="!border-none flex flex-1 items-center justify-center " shadow="never"
                 v-if="formData.afterSaleOrderType===AfterSaleOrderTypeEnum.CONSIGNMENT">
            
            <div class=" text-lg	 mb-4">
                发件地址
            </div>
            
            <div class=" w-[800px]">
                <div class="pl-3 grid grid-cols-2 gap-0">
                    <el-form-item label="收件人 :" prop="userName">
                        <p class="text-tx-regular">
                            {{ formData.sendAfterSaleAddress?.userName }}
                        </p>
                    </el-form-item>
                    <el-form-item label="电话 :" prop="userPhone">
                        <p class="text-tx-regular">
                            {{ formData.sendAfterSaleAddress?.userPhone }}
                        </p>
                    </el-form-item>
                    
                    <el-form-item label="详细地址 :" prop="address">
                        <p class="text-tx-regular">
                            {{ formData.sendAfterSaleAddress?.addressFull }}
                        </p>
                    </el-form-item>
                
                
                </div>
            </div>
        </el-card>
        
        <el-card class="!border-none flex flex-1 items-center justify-center " shadow="never"
                 v-if="formData.afterSaleOrderType===AfterSaleOrderTypeEnum.CONSIGNMENT">
            
            <div class=" text-lg	 mb-4">
                拒收地址
            </div>
            
            <div class=" w-[800px]">
                <div class="pl-3 grid grid-cols-2 gap-0">
                    <el-form-item label="收件人 :" prop="userName">
                        <p class="text-tx-regular">
                            {{ formData.rejectAfterSaleAddress?.userName }}
                        </p>
                    </el-form-item>
                    <el-form-item label="电话 :" prop="userPhone">
                        <p class="text-tx-regular">
                            {{ formData.rejectAfterSaleAddress?.userPhone }}
                        </p>
                    </el-form-item>
                    
                    <el-form-item label="详细地址 :" prop="address">
                        <p class="text-tx-regular">
                            {{ formData.rejectAfterSaleAddress?.addressFull }}
                        </p>
                    </el-form-item>
                
                
                </div>
            </div>
        </el-card>
        
        <!--        物料 信息-->
        <el-card class="!border-none flex flex-1  mt-4 " shadow="never">
            
            <el-tabs class="flex flex-1 items-center" tab-position="left">
                <el-tab-pane class="text-2xl font-medium" disabled>物料详情</el-tab-pane>
            </el-tabs>
        </el-card>
        
        
        <!--        物料-->
        <el-card class="!border-none   " shadow="never">
            <el-table
                ref="tableRef"
                class="mt-0.5 ml-4 mb-32 rounded-t-lg"
                size="default"
                :data="formData.afterSaleItemLineInfoList"
            
            >
                
                <el-table-column type="index" fixed label="行号" width="70"/>
                
                
                <el-table-column label="发出物料状态" prop="status" min-width="120" fixed>
                    <template #default="{ row }">
                        <ScSignSvgRound v-for="(item,index)   in afterSaleOrderConfig.afterSaleOrderLineStatus"
                                        v-show=" row.outMaterialInfo.status === item.code"
                                        :key=index
                                        :background="item.type"
                                        :value="item.name"/>
                    </template>
                </el-table-column>
                
                
                <el-table-column label="售后69码" prop="batch" min-width="150">
                    
                    <template #default="{row}">
                        <p>{{ row.inMaterIalInfo?.batch }}</p>
                    </template>
                
                </el-table-column>
                
                
                <el-table-column label="售后物料编码" prop="itemCode" min-width="150">
                    <template #default="{row}">
                        <p>{{ row.inMaterIalInfo?.itemCode }}</p>
                    </template>
                </el-table-column>
                
                
                <el-table-column label="售后物料名称" prop="itemName" min-width="150">
                    <template #default="{row}">
                        <p>{{ row.inMaterIalInfo?.itemName }}</p>
                    </template>
                </el-table-column>
                
                
                <el-table-column label="售后SN" prop="itemName" min-width="150">
                    <template #default="{row}">
                        <p>{{ row.inMaterIalInfo?.sn }}</p>
                    </template>
                </el-table-column>
                
                
                <el-table-column label="发出69码" prop="itemName" min-width="150"
                                 v-if="formData.afterSaleOrderType=== AfterSaleOrderTypeEnum.CONSIGNMENT">
                    <template #default="{row}">
                        <p>{{ row.outMaterialInfo?.batch }}</p>
                    </template>
                </el-table-column>
                
                
                <el-table-column label="发出sn" prop="sn" min-width="230">
                    <!--                    :disabled="!row.isDisabled"-->
                    <template #default="{row}">
                        <el-input
                            :disabled="!row.isDisabled"
                            placeholder="请输入发出物料编码"
                            clearable
                            v-model="row.outMaterialInfo.sn">
                        
                        </el-input>
                    </template>
                
                </el-table-column>
                
                <el-table-column label="发出仓库" prop="warehouse" min-width="200">
                    <template #default="{row}">
                        <sc-cascader placeholder="请选择发出仓库"
                                     v-model="row.outMaterialInfo.warehouseCode"
                                     v-model:value1="row.outMaterialInfo.company"
                                     v-model:value2="row.outMaterialInfo.warehouse"
                                     :options="afterSaleOrderConfig.orderWarehouseConfig"
                                     :disabled="!row.isDisabled"
                        />
                    </template>
                </el-table-column>
                
                <el-table-column label="物料属性" prop="itemName" min-width="150"
                                 v-if="formData.afterSaleOrderType === AfterSaleOrderTypeEnum.CONSIGNMENT">
                    <template #default="{row}">
                        <p>{{ row.outMaterialInfo?.itemProperty }}</p>
                    </template>
                </el-table-column>
                
                <el-table-column label="发出物料编码" prop="itemName" min-width="150"
                                 v-if="formData.afterSaleOrderType=== AfterSaleOrderTypeEnum.CONSIGNMENT">
                    <template #default="{row}">
                        <p>{{ row.outMaterialInfo?.itemCode }}</p>
                    </template>
                </el-table-column>
                
                <el-table-column label="发出物料名称" prop="itemName" min-width="150"
                                 v-if="formData.afterSaleOrderType=== AfterSaleOrderTypeEnum.CONSIGNMENT">
                    <template #default="{row}">
                        <p>{{ row.outMaterialInfo?.itemName }}</p>
                    </template>
                </el-table-column>
                
                <el-table-column label="操作" width="160" fixed="right">
                    <template #default="{ row }">
                        <el-button
                            v-if="!row.isDisabled"
                            @click="row.isDisabled=true"
                            type="primary"
                            link
                        >
                            编辑
                        </el-button>
                        
                        <el-button
                            v-if="row.isDisabled"
                            @click="editCurrentLine(row)"
                            type="primary"
                            link
                        >
                            保存
                        </el-button>
                    
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </el-form>
    
    
    <sc-transfer ref="transferRef" @confirm="transferConfirm" @close="showTransferRef=false" v-if="showTransferRef">
        
        <el-form ref="formRef" class="pl-3 mb-6" :model="formData" label-width="90px" inline>
            <div class="justify-center">
                <el-form-item label="发运单类型:" prop="type">
                    
                    <el-select class="w-64" v-model="queryFormData.type" placeholder="请选择发运单类型">
                        <el-option
                            v-for="item in AfterSaleSendTypeEnumEnumList"
                            :label="item.name"
                            :value="item.code"/>
                    </el-select>
                </el-form-item>
                
                <el-form-item label="仓库类型:" prop="warehouse" v-if="isDisabled ||isDisabled2">
                    <ScCascader class="w-64" :options="afterSaleOrderConfig.orderWarehouseConfig"
                                v-model:value1="queryFormData.company"
                                v-model:value2="queryFormData.warehouse"
                                @change="handleSelectWarehouse">
                    </ScCascader>
                </el-form-item>
                
                
                <el-form-item label="物流公司:" prop="warehouse" v-if="isDisabled2 ">
                    <el-input class="w-64" v-model="queryFormData.logisticCompany"
                              placeholder="请输入物流公司"></el-input>
                </el-form-item>
                
                <el-form-item label="物流单号:" prop="warehouse" v-if="isDisabled2 ">
                    <el-input class="w-64" v-model="queryFormData.logisticNumber"
                              placeholder="请输入物流单号"></el-input>
                
                </el-form-item>
            
            </div>
        
        
        </el-form>
    
    </sc-transfer>
    
    <footer-btns>
        <el-button type="primary" @click="handleShipping" v-if="createIsDisabled">
            提交发运单
        </el-button>
    </footer-btns>


</template>

<script lang='ts' setup>

import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";
import {UnwrapNestedRefs} from "@vue/reactivity";
import {useFormatterManager} from "@/manager/base/FormatterManager";
import {getSendOrderAfterInfo} from "@/api/afterSale/order/AfterSaleOrderController";
import AfterSaleSendOrderInfo from "@/api/afterSale/order/dto/AfterSaleSendOrderInfo";
import IdRequest from "@/api/baisc/IdRequest";
import {AfterSaleItemLineInfoDTO} from "@/api/afterSale/order/dto/AfterSaleItemLineInfoDTO";
import feedback from "@/utils/feedback";
import {updAfterSaleOrderLineOneById} from "@/api/afterSale/order/AfterSaleOrderLineController";
import AfterSaleItemMaterialRequest from "@/api/afterSale/order/request/AfterSaleItemMaterialRequest";
import {UnwrapRef} from "vue";
import AfterSaleCreateShippingRequest from "@/api/afterSale/warehouse/request/AfterSaleCreateShippingRequest";
import useMultipleTabsManager from "@/manager/base/MultipleTabsManager";
import {AfterSaleSendTypeEnum, AfterSaleSendTypeEnumEnumList} from "@/config/enums/aftersale/AfterSaleSendTypeEnum";
import {createShippingOrder} from "@/api/afterSale/warehouse/AfterSaleShippingController";
import RouterManager from "@/manager/base/RouterManager";
import router from "@/base/router";
import {AfterSaleOrderTypeEnum} from "@/config/enums/aftersale/AfterSaleOrderTypeEnum";

let multipleTabsManager = useMultipleTabsManager();
let afterSaleOrderConfig = useAfterSaleEnumManager();
let formatterManager = useFormatterManager(afterSaleOrderConfig);

let transferRef = shallowRef();
let showTransferRef = ref(false);


let createIsDisabled = computed(() => {
    const filter = formData.afterSaleItemLineInfoList.filter(item => !item.outMaterialInfo.sn);
    const filter1 = formData.afterSaleItemLineInfoList.filter(item => !item.outMaterialInfo.warehouse);
    return filter.length == 0 && filter1.length == 0;
})


const isDisabled = computed(() => {
    return queryFormData.type === AfterSaleSendTypeEnum.ONLINE
})


const isDisabled2 = computed(() => {
    return queryFormData.type == AfterSaleSendTypeEnum.OFFLINE;
})


/**
 * 数据
 *
 * @author 徐寿春
 * 2023/4/23 17:06
 */
let formData: UnwrapNestedRefs<AfterSaleSendOrderInfo> = reactive(new AfterSaleSendOrderInfo())
const queryFormData: UnwrapRef<AfterSaleCreateShippingRequest> = reactive(new AfterSaleCreateShippingRequest)


const shopNameList = computed(() => {
    return formatterManager.computeFormatterShop(formData.channel)
})


/**
 *  预处理提交发运单
 *
 * @author 徐寿春
 * 2023/4/24 09:07
 */
async function handleShipping() {
    
    const filter = formData.afterSaleItemLineInfoList.filter(item => item.isDisabled == true);
    
    if (filter.length > 0) {
        feedback.notifyError("存在未保存的发货物料信息");
        return
    }
    
    showTransferRef.value = true
    await nextTick()
    
    transferRef.value.openTransfer()
}


/**
 * 判断是否打开disabled
 *
 * @author 徐寿春
 * 2023/4/24 10:05
 */
function editCurrentLine(row: AfterSaleItemLineInfoDTO) {
    
    if (!row.outMaterialInfo?.sn || !row.outMaterialInfo?.warehouse) {
        feedback.notifyError("发出物料sn 和 仓库不可为空")
        return
    }
    
    let afterSaleItemMaterialRequest = new AfterSaleItemMaterialRequest();
    afterSaleItemMaterialRequest.afterSaleOrderLineId = row.outMaterialInfo.afterSaleOrderLineId
    afterSaleItemMaterialRequest.sn = row.outMaterialInfo?.sn
    afterSaleItemMaterialRequest.warehouse = row.outMaterialInfo?.warehouse
    afterSaleItemMaterialRequest.company = row.outMaterialInfo?.company
    
    updAfterSaleOrderLineOneById(afterSaleItemMaterialRequest).then(() => {
        row.isDisabled = false
    })
}


/**
 *  处理仓库选择
 *
 * @author 徐寿春
 * 2023/4/25 11:20
 */
function handleSelectWarehouse(value: string[]) {
    const filter = formData.afterSaleItemLineInfoList.filter(item => {
        if (!!item.outMaterialInfo?.warehouseCode) {
            return item.outMaterialInfo?.warehouseCode[1] === value[1]
        }
    })
    
    if (filter.length > 0) {
        transferRef.value.seTransferDate(filter.map(item => item.outMaterialInfo))
    } else {
        transferRef.value.seTransferDate()
    }
    
    
}

/**
 *
 *  传输框确认
 *
 * @author 徐寿春
 * 2023/4/25 13:50
 */
function transferConfirm(value: any []) {
    if (value.length === 0) {
        feedback.notifyError("该仓位无映射物料,请重新选择")
        return
    }
    
    
    queryFormData.afterSaleOrderLineIds = value
    queryFormData.afterSaleOrderId = formData.afterSaleOrderId
    queryFormData.afterSaleOrderNo = formData.afterSaleOrderNo
    
    createShippingOrder(queryFormData).then(() => {
        transferRef.value.close()
        feedback.notifySuccess("发运单创建成功")
        
        let idRequest = new IdRequest();
        idRequest.id = formData.afterSaleOrderId
        
        getSendOrderAfterInfo(idRequest).then((item: AfterSaleSendOrderInfo) => {
            for (let formDataKey in formData) {
                //@ts-ignore
                formData[formDataKey] = item[formDataKey]
            }
            
            console.log("formData.afterSaleItemLineInfoList", formData.afterSaleItemLineInfoList)
            
            if (formData.afterSaleItemLineInfoList.length == 0) {
                multipleTabsManager.removeTab()
                let routePathByName = RouterManager.getRoutePathByName("afterSaleOrder/logistics/send/index");
                if (!!routePathByName) {
                    router.push(routePathByName)
                }
                
            }
        })
        
        
    })
    
    
}


// ------------------------------------------------------ 基础数据  ------------------------------------------------------
/**
 * 获取数据
 *
 * @author 徐寿春
 * 2023/4/24 09:26
 */
function getData(id: number) {
    let idRequest = new IdRequest();
    idRequest.id = id
    getSendOrderAfterInfo(idRequest).then((item: AfterSaleSendOrderInfo) => {
        for (let formDataKey in formData) {
            //@ts-ignore
            formData[formDataKey] = item[formDataKey]
        }
    })
}


const emit = defineEmits(['success', 'close'])
let route = useRoute();
onMounted(() => {
    getData(route.query?.id as any)
})

defineExpose({
    open,
    close
})


</script>




